<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱买购物网</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="indexcss/index.css">
    <link rel="stylesheet" href="indexcss/base.css">
	<link rel="stylesheet" href="indexcss/gwc.css" />
	<script src="js/commodity.js"></script>
	<link rel="stylesheet" href="css/commodity.css" />

</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-light navbar-expand-md bg-light heima_nav">
        <div class="container-lg">
            <div class="row justify-content-between" style="width: 100%;">
                <a class="navbar-brand col-2" href="index.html">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="45" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                    </svg>
                </a>
                <div class="row justify-content-start" style="margin-right: -40px;">

                    <div class="navbar-nav1 user-info col-2">
                        <div class="nav-item">
                            <div class="dropdown show">
                                <a class="nav-link1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img src="img/touxiang.png" alt="" class="user-img">
                                <span class="caret">用户88888881</span>
                                </a>
                            
                                <div class="dropdown-menu " aria-labelledby="dropdownMenuLink">
									<a class="dropdown-item" href="gwc.html">购物车</a>
                                    <a class="dropdown-item" href="usercenter.html">个人中心</a>
                                <a class="dropdown-item" href="#">退出登录</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           
            <div class="navbar-nav2 col-2 user-info" style="margin-right: 30px;">
                <div class="nav-item">
                    <div class="dropdown show">
                        <a class="nav-link1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <img src="img/touxiang.png" alt="" class="user-img">
                          <span class="caret">用户88888882</span>
                        </a>
                      
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
							<a class="dropdown-item" href="gwc.html">购物车</a>
							<a class="dropdown-item" href="usercenter.html">个人中心</a>
                          <a class="dropdown-item" href="#">退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
    </nav>
	
	<div class="w">
		<div class="container">
			<div class="row cart-thead">
				<div class="col-xl-1 col-lg-2 col-1 t-checkbox">
				    <input type="checkbox" name="" id="" class="checkall">
				</div>
				<div class="col-xl-4 col-lg-3 col-3">商品</div>
				<div class="col-xl-1 col-lg-2 col-2">单价</div>
				<div class="col-xl-3 col-lg-2 col-2">数量</div>
				<div class="col-xl-1 col-lg-2 col-2">小计</div>
				<div class="col-xl-1 col-lg-1 col-2">操作</div>
			</div>
			
			<div class="row cart-item">
				<div class="col-xl-1 col-lg-2 col-1 p-checkbox">
				    <input type="checkbox" name="" id="" class="j-checkbox">
				</div>
				<div class="col-xl-4 col-lg-3 col-3 p-goods">
					<div class="p-img">
						<img src="shop/p1.jpg" alt="" />
					</div>
					<div class="p-txt">
						经典儿童文学...
					</div>
				</div>
				<div class="col-xl-1 col-lg-2 col-2 p-price">¥ 32.50</div>
				<div class="col-xl-3 col-lg-2 col-2 p-num">
					<div class="quantity-form">
					     <a href="javascript:;" class="decrement">-</a>
					     <input type="text" class="itxt" value="1">
					     <a href="javascript:;" class="increment">+</a>
					</div>
				</div>
				<div class="col-xl-1 col-lg-2 col-2 p-sum">¥ 32.50</div>
				<div class="col-xl-1 col-lg-1 col-2 p-action">删除</div>
			</div>
			
			<div class="row cart-item">
				<div class="col-xl-1 col-lg-2 col-1 p-checkbox">
				    <input type="checkbox" name="" id="" class="j-checkbox">
				</div>
				<div class="col-xl-4 col-lg-3 col-3">
					<div class="p-img">
						<img src="shop/p2.jpg" alt="" />
					</div>
					<div class="p-txt">
						经典儿童文学...
					</div>
				</div>
				<div class="col-xl-1 col-lg-2 col-2 p-price">¥ 41.30</div>
				<div class="col-xl-3 col-lg-2 col-2 p-num">
					<div class="quantity-form">
					     <a href="javascript:;" class="decrement">-</a>
					     <input type="text" class="itxt" value="1">
					     <a href="javascript:;" class="increment">+</a>
					</div>
				</div>
				<div class="col-xl-1 col-lg-2 col-2 p-sum">¥ 41.30</div>
				<div class="col-xl-1 col-lg-1 col-2 p-action">删除</div>
			</div>
			
			<div class="row cart-item">
				<div class="col-xl-1 col-lg-2 col-1 p-checkbox">
				    <input type="checkbox" name="" id="" class="j-checkbox">
				</div>
				<div class="col-xl-4 col-lg-3 col-3">
					<div class="p-img">
						<img src="shop/p3.jpg" alt="" />
					</div>
					<div class="p-txt">
						经典儿童文学...
					</div>
				</div>
				<div class="col-xl-1 col-lg-2 col-2 p-price">￥12.60</div>
				<div class="col-xl-3 col-lg-2 col-2 p-num">
					<div class="quantity-form">
					     <a href="javascript:;" class="decrement">-</a>
					     <input type="text" class="itxt" value="1">
					     <a href="javascript:;" class="increment">+</a>
					</div>
				</div>
				<div class="col-xl-1 col-lg-2 col-2 p-sum">￥12.60</div>
				<div class="col-xl-1 col-lg-1 col-2 p-action">删除</div>
			</div>
			
			<div class="row cart-floatbar" style="justify-content: space-around;flex-wrap: wrap;">
				<div class="col-xl-1 col-md-5 col-sm-3 col-1 select-all">
				    <input type="checkbox" name="" id="" class="checkall">全选
				</div>
				<div class="col-xl-4 col-md-6 col-sm-8 col-9 operation" style="display: flex;justify-content: flex-end;">
				    <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
				    <a href="javascript:;" class="clear-all">清理购物车</a>
				</div>
				<div class="col-xl-5 col-12 toolbar-right">
				    <div class="amount-sum">已经选<em>1</em>件商品</div>
				    <div class="price-sum">总价： <em>￥12.60</em></div>
				    <div class="btn-area">去结算</div>
				</div>
			</div>
		</div>
	</div>
	
	<script>
		$(function(){
		            // 1. 全选功能
		            $(".checkall").click(function(){
		                $(".checkall,.j-checkbox").prop("checked",$(this).prop("checked"));
		                if($(this).prop("checked")){
		                    $(".j-checkbox").parents(".cart-item").addClass("check-cart-item");
		                }else{
		                    $(".j-checkbox").parents(".cart-item").removeClass("check-cart-item");
		                }
		            });
		
		            // 2. 单选功能
		            $(".j-checkbox").click(function(){
		                if($(".j-checkbox:checked").length==$(".j-checkbox").length){
		                    $(".checkall").prop("checked",true);
		                }else{
		                    $(".checkall").prop("checked",false);
		                }
		                if($(this).prop("checked")){
		                    $(this).parents(".cart-item").addClass("check-cart-item");
		                }else{
		                    $(this).parents(".cart-item").removeClass("check-cart-item");
		                }
		            });
		
		            // 3. 加号功能模块
		            $(".increment").click(function(){
		                var num=$(this).siblings(".itxt").val();
		                num++;
		                $(this).siblings(".itxt").val(num);
		                var price=$(this).parents(".p-num").siblings(".p-price").html();
		                price=price.substr(1);
		                var sum=(price * num).toFixed(2);
		                $(this).parents(".p-num").siblings(".p-sum").html("￥"+sum);
		                getSum();
		            });
		
		            // 4. 减号功能实现
		            $(".decrement").click(function(){
		                var num=$(this).siblings(".itxt").val();
		                if(num==1){
		                    return false;
		                }
		                num--;
		                $(this).siblings(".itxt").val(num);
		                var price=$(this).parents(".p-num").siblings(".p-price").html();
		                price=price.substr(1);
		                var sum=(price * num).toFixed(2);
		                $(this).parents(".p-num").siblings(".p-sum").html("￥"+sum);
		                getSum();
		            });
		
		            // 5. 直接修改数量
		            $(".itxt").change(function(){
		                var n=$(this).val();
		                var p=$(this).parents(".p-num").siblings(".p-price").html();
		                p=p.substr(1);
		                var sum=(p * n).toFixed(2);
		                $(this).parents(".p-num").siblings(".p-sum").html("￥"+sum);
		                getSum();
		            });
		
		            // 6. 统计购物车商品的总数和价格
		            getSum();
		            function getSum(){
		                var sum=0;
		                var price=0;
		
		                $(".itxt").each(function(i,n){
		                    sum+=parseInt($(n).val());
		                })
		                $(".amount-sum em").text(sum);
		                
		                $(".p-sum").each(function(i,p){
		                    price+=parseFloat($(p).text().substr(1));
		                })
		                $(".price-sum em").text("￥"+price.toFixed(2));
		            }
		
		            // 7. 删除商品功能
		            $(".p-action").click(function(){
		                $(this).parents(".cart-item").remove();
		                getSum();
		            });
		
		            // 8. 删除选中商品功能
		            $(".remove-batch").click(function(){
		                $(".j-checkbox:checked").parents(".cart-item").remove();
		                getSum();
		            })
		
		            // 9. 清空购物车功能
		            $(".clear-all").click(function(){
		                $(".j-checkbox").parents(".cart-item").remove();
		                getSum();
		            })
		        })
	</script>
	
	<main>
		<section class="related-products">
		    <h3>相关推荐</h3>
		    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
		        
		            <div class="card text-center mb-3">
		                <a href="HuanYouZhongGuo.html">
		                    <img src="./images/HuanYouZhongGuo.jpg" class="card-img-top" alt="...">
		                </a>
		                    <div class="card-body">
		                      <h5 class="card-title">《环游中国》</h5>
		                      <p class="card-text"><a href="javascript:;">地质出版社</a> 编 <a href="javascript:;">羽奕</a> 著</p>
		                      <a href="HuanYouZhongGuo.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		            
		                
		                <div class="card text-center mb-3">
		                    <a href="ChenYu.html">
		                        <img src="./images/ChengYu.jpg" class="card-img-top" alt="...">
		                    </a>
		                    <div class="card-body">
		                      <h5 class="card-title">《一口气读完成语故事》</h5>
		                      <p class="card-text"><a href="javascript:;">北京时代华文书局</a> 编 <a href="javascript:;">羽奕</a> 著</p>
		                      <a href="ChenYu.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="JiaShan.html"><img src="./images/JiaShan.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《家山》</h5>
		                      <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">王跃文</a> 著</p>
		                      <a href="JiaShan.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="LunYu.html"><img src="./images/LunYu.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《给孩子的四书五经》</h5>
		                      <p class="card-text"><a href="javascript:;">民主与建设出版社</a> 编 <a href="javascript:;">陈仁谦</a> 著</p>
		                      <a href="LunYu.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="QiangGuoJi.html"><img src="./images/QiangGuoJi.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《强国记》</h5>
		                      <p class="card-text"><a href="javascript:;">电子工业出版社有限公司</a> 编 <a href="javascript:;">徐</a> 著</p>
		                      <a href="QiangGuoJi.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="QingYuNian.html"><img src="./images/QingYuNian.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《庆余年》</h5>
		                      <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">猫腻</a> 著</p>
		                      <a href="QingYuNian.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="WuJiangYin.html"><img src="./images/WuJiangYin.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《乌江引》</h5>
		                      <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">庞贝</a> 著</p>
		                      <a href="WuJiangYin.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="XiJinPin.html"><img src="./images/XiJinPin.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《习近平引用诗词释读》</h5>
		                      <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">诗词编写组</a> 著</p>
		                      <a href="XiJinPin.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="YangFan.html"><img src="./images/YangFan.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《样范》</h5>
		                      <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">龚曙光</a> 著</p>
		                      <a href="YangFan.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		                <div class="card text-center mb-3">
		                    <a href="YanXiaLi.html"><img src="./images/YanXiaLi.jpg" class="card-img-top" alt="..."></a>
		                    <div class="card-body">
		                      <h5 class="card-title">《烟霞里》</h5>
		                      <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">魏微</a> 著</p>
		                      <a href="YanXiaLi.html" class="btn btn-warning">立即购买</a>
		                    </div>
		                </div>
		    </div>
		</section>
	</main>
</body>
</html>